import React, { Component } from 'react'
import './User.css'
import PropTypes from 'prop-types'
class User extends Component {
  constructor(props) {
    super(props)
    this.state = { opacity: 1.0, sonColor: 'blueviolet' }
  }
  doTiem = () => {
    let opacity = this.state.opacity
    opacity -= 0.05
    if (opacity < 0.1) {
      opacity = 1.0
    }
    this.setState({
      opacity: opacity
    })
  }
  sonMethods = () => {
    this.setState({
      sonColor: 'red'
    })
  }
  componentDidMount() {
    this.timerID = setInterval(() => {
      this.doTiem()
    }, 1000)
  }
  componentWillUnmount() {
    clearInterval(this.timerID)
  }
  render() {
    return (
      <div
        style={{ opacity: this.state.opacity, color: this.state.sonColor }}
        className="user"
      >
        <h2>Hello {this.props.name}</h2>
      </div>
    )
  }
}
User.propTypes = {
  name: PropTypes.string
}
export default User
